site_8g/src/app/[locale]/(wheel)/cashWheel/style.module.scss

.cashWheelClient{
  padding:0.07rem 0.26rem 0;
  .cashMain{
    border-radius: .1rem;
    background-color: rgb(35, 35, 39);

    &.type1{
      padding: .08rem .23rem .02rem;
      width: 100%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin-bottom: .2rem;
      .haveCash {
        font-size: .3rem;
        color: #6ddf38;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%
      }
      .needCash {
        color: #fff;
        text-align: center
      }

      .needCashNum {
          color: #6ddf39
      }
    }



    .progress {
      width: 100%;
      margin: .11rem 0 .07rem;
      position: relative;
      .num {
        position: absolute;
        right: 0;
        top: -.18rem;
        color: #fff
      }
      .bar {
        width: 100%;
        height: .08rem;
        background: #6ddf39;
        border-radius: .1rem;
        position: relative;
        span {
          position: absolute;
          left: 0;
          top: 0;
          display: inline-block;
          height: .08rem;
          background: #6ddf39;
          border-radius: .08rem;
          &:after {
            content: "";
            display: inline-block;
            width: .08rem;
            position: absolute;
            height: .08rem;
            border-radius: 50%;
            background-color: #fff;
            right: 0
          }
        }
      }
    }



    .haveCash {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      font-size: .3rem;
      font-family: Roboto;
      font-weight: 700;
      margin: .06rem 0;
      width: -webkit-calc(100% + .2rem);
      width: calc(100% + .2rem);
      white-space: nowrap;
      .currency {
        text-transform: uppercase
      }
      .cashImg {
        width: .5rem
      }
      .cash {
        width: .52rem;
        font-weight: 700;
        margin-right: .12rem
      }

    }

    .noWithdraw,.haveCash {
      color: #fff;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center
    }

    .needCash {
        height: .22rem;
        border-radius: .14rem;
        font-size: .13rem;
        color: #fff;
        line-height: .22rem;
        margin-bottom: .05rem;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%
    }

    .needCashNum {
        font-family: "SWISSC-BT";
        margin: 0 .03rem
    }

    .withdraw {
      width: .65rem;
      height: .2rem;
      padding: .02rem .06rem;
      background: #efb423 -webkit-gradient(linear,left top,right top,from(#49a319),to(#2b8b2f));
      background: #efb423 -webkit-linear-gradient(left,#49a319,#2b8b2f);
      background: #efb423 -o-linear-gradient(left,#49a319 0,#2b8b2f 100%);
      background: #efb423 linear-gradient(90deg,#49a319,#2b8b2f);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      font-size: .12rem;
      font-family: Roboto;
      font-weight: 700;
      color: #fff;
      border-radius: .1rem;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      cursor: pointer;
      img {
        width: .14rem;
        margin-right: .03rem
      }
    }


  }

  .drawMain {
    width: 2.53rem;
    height: 2.53rem;
    margin: .5rem -.11rem 0;
    padding: .5rem;
    background-size: cover;
    .draw {
      width: 2.53rem;
      height: 2.53rem;
      margin: .1rem auto .06rem;
      position: relative;
    }
    .lamp{
      position: absolute;
      left: -29%;
      top: -36%;
      z-index: 4;
      width: 157%;
      max-width: 157%;
      pointer-events: none
    }
    .light1,.light2 {
      position: absolute;
      z-index: 4;
      width: 96%;
      height: 96%;
      right: .09rem;
      top: .09rem
    }
    .drawBgImg{
        position: absolute;
        z-index: 1;
        left: -25%;
        top: -45%;
        width: 156%;
        max-width: 156%;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-animation: drawBgImg 20s linear infinite;
        animation: drawBgImg 20s linear infinite
    }


    .position {
      position: absolute;
      left: 48%;
      top: 51%;
      -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
    }
    .drawImg {
      z-index: 8;
      width: 28%
    }

    .pointer {
      position: absolute;
      width: 96%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      img{
        width:.78rem;
        height:.46rem;
        z-index: 10;
      }
    }

    .drawContents {
      width: 84%;
      height: 84%;
      border-radius: 50%;
      overflow: hidden;
      margin: -40.5% 0 0 -43.5%;
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 5
    }

    #draw {
        width: 100%;
        height: 100%;
        background-image: url('/wheel/spinBg.png');
        background-size: cover;
        border-radius: 50%
    }
  }



  .drawContent {
    margin-top: .9rem;
    position: relative;
    z-index: 6;
    .text{
      color: #fff;
      text-align: center;
      font-size: .13rem;
      margin-top: .11rem;
      height: .2rem;
    }
    .cashButton {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      height: .35rem;
      line-height: .35rem;
      margin: .06rem 0 .2rem;
      font-size: .19rem;
      width: 100%;
      border-radius: .03rem;
      text-align: center;
      background: #202124;
      font-size: .14rem;
      font-family: Roboto;
      color: #fff;
      div {
        width: 100%
      }
      .iconfont{
        width: .4rem;
        background: #232327;
        font-family: iconfont !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        &iconShare:before{
          content: "\e61f";
        }
      }
    }
  }

  .report{
    .vanTabs{
      position: relative;
      box-sizing: content-box;
      height: 100%;
      padding-bottom: 15px;
      //padding-right: 8px;
      //padding-left: 8px;
      border-radius: 15px;
      background: #000;

      .vanTabsWrap{
        overflow: initial;
        height:44px;
      }
      .vanTabsNav{
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
      }

      .vanTabsNav::-webkit-scrollbar {
          display: none
      }

      .vanTabsNav {
          position: relative;
          display: -webkit-box;
          display: -webkit-flex;
          display: grid;
          grid-template-columns: 1fr 1fr;
          background: transparent;
          -webkit-user-select: none;
          user-select: none;
          border-top-right-radius: 20px;
          border-top-left-radius: 20px;
      }
      .vanTabItem{
        background: #000;
        color: #9c9c9c;
        font-size: 0.15rem;
        height:.45rem;
        line-height: .45rem;
        padding:0 4px;
        flex:1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        & .activeText{
          position: relative;
          color: #fff;
          //border: 1px solid red;
          text-decoration: underline #15a920;
          text-underline-offset: 8px;
        }
        &.vanTabAcriveRight{
          position: relative;
          z-index: 1;
          &:before{
            content: '';
            position: absolute;
            left: 0;
            z-index: -1;
            width: 110%;
            height: 100%;
            background-image: url("/wheels/right-button.png");
            background-size: 100% 100%;
          }
        }
        &.vanTabAcriveLeft{
          position: relative;
          z-index: 1;
          &:before{
            content: '';
            position: absolute;
            right: 0;
            z-index: -1;
            width: 110%;
            height: 100%;
            background-image: url("/wheels/left-button.png");
            background-size: 100% 100%;
          }
        }
      }

      .vanTabsContent{
        margin-top: .15rem;
        //background: #000;
        .vantabpane{
          width: 100%;
          box-sizing: border-box;
        }
        .tabContent{
          height:1.7rem;
          overflow: hidden;

        }

        .winList {
          height: 100%;
          animation: smoothscroll 12.6s linear infinite;
          .item {


            height: .3rem!important;
            font-size: .12rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            color: #8795b1;
            background-color: transparent;
            padding: 0 .05rem;
            .name{
              color: #8795b1;
              display: block;
              width: 1rem
            }
            .tipText {
              color: #8795b1;
              min-width: 1.1rem
            }
            .value {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: end;
              -ms-flex-pack: end;
              justify-content: flex-end;
              width: .55rem;
              img {
                width: .24rem
              }
            }
            .addCash{
              color: #6ddf39;
              width: .33rem
            }
            .unit {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              justify-content: center;
              font-family: SWISSC-BT;
              color: #fff;
              font-size: .1rem;
              height: .16rem;
              width: .16rem;
              background: #6ddf39;
              border-radius: 50%;
              margin-left: .02rem
            }
          }

          &.type1{
            .item {
              border-radius: 0;
              &:last-child {
                border-bottom: none
              }
            }
          }
        }
      }
    }
    .rules {
      border-radius: .04rem;
      background: #232327;
      //width: 106%;
      //margin-left: -3%;
      margin-top: .04rem;
      padding: 0.0694rem;

      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      h2 {
        font-size: .18rem;
        color: #8795b1;
        padding-top: .11rem;
        text-align: center
      }

      .tipsContent {
        font-size: .14rem;
        color: #7d8397;
        li {
          margin: .16rem 0
        }
      }

    }
  }




}


@-webkit-keyframes drawBgImg {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes drawBgImg {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes smoothscroll {
  0% {
    transform: translateY(0);
  }

  100% {
   transform: translateY(-6.14rem);
  }
}